<!--  -->
<template>
  <div class="app-container">
    <!-- START 卡片视图 START -->
    <el-card style="margin-bottom: 10px;">
      <!-- START添加和展开/折叠按扭区域 START -->
      <el-row :gutter="10">
        <el-col :span="6">
          <el-button type="primary" plain size="mini" icon="el-icon-plus" @click="openRightDialog">新增</el-button>
          <el-button type="info" plain size="mini" icon="el-icon-sort" @click="toggleExpandAll">展开/折叠</el-button>
        </el-col>
      </el-row>
      <!--  END 添加和展开/折叠按扭区域 END -->
    </el-card>
    <!-- END 卡片视图 END -->

    <!-- START 权限列表区域 START -->
    <el-card>
      <el-table
        v-if="refreshTable"
        v-loading="listLoading"
        :data="menuList"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        :stripe="true"
        :default-expand-all="isExpandAll"
      >
        <el-table-column label="权限名称" width="240px" align="left">
          <template slot-scope="{row}">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="请求路径" width="240px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.url }}</span>
          </template>
        </el-table-column>
        <el-table-column label="组件路径" width="160px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.path }}</span>
          </template>
        </el-table-column>
        <el-table-column label="组件名称" width="180px" align="center">
          <template slot-scope="{row}">
            <span v-if="row.component != null">{{ row.component }}.vue</span>
            <span v-else />
          </template>
        </el-table-column>
        <el-table-column label="图标" width="80px" align="center">
          <template slot-scope="{row}">
            <span :class="row.iconCls" />
              <!-- 因为小图标来自两个不同地方，一个是Element-ui，另一个是本地，所以我们将@/layout/components/Sidebar/Item.vue组件导入进来，使用这个组件来显示小图标，这个Item.vue组件中对这两个不同位置的小图标进行了判断-->
              <item :icon="row.iconCls"></item>
          </template>
        </el-table-column>
        <!-- 菜单类别：menuLevel字段，1、代表菜单  2、按扭-->
        <el-table-column label="菜单类别" width="110px" align="center">
          <template slot-scope="{row}">
            <span v-if="row.menuLevel == 3">按扭</span>
            <span v-else>菜单</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px" align="center">
          <!-- 使用作用域插槽的形式为[权限等级]列自定义内容，使用scope来接收所有的数据 -->
          <template slot-scope="scope">
            <!-- 编辑按扭 -->
            <el-button
              icon="el-icon-edit"
              type="primary"
              size="mini"
              plain
              round
              @click="showEditDialog(scope.row.id)"
            >编辑</el-button>
            <!-- 删除按扭 -->
            <el-button
              icon="el-icon-delete"
              type="danger"
              size="mini"
              plain
              round
              @click="delRightById(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- END 权限列表区域 END-->
    <!-- START 添加菜单权限对话框 START -->
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="addRightDialogVisible"
      width="40%">
      <el-form ref="addFormRef" :rules="addFormRules" :model="addForm" label-position="left" label-width="80px" style="width: 550px; margin-left:15px;">
          <el-form-item label="上级菜单" prop="name">
            <tree-select
              :data="treeMenuList"
              :default-props="defaultProps"
              :node-key="nodeKey"
              @popoverHide="popoverHide"
              ref="treeRef"
              :checked-keys="defaultCheckedKeys"
            />
          </el-form-item>
          <el-form-item label="菜单等级" prop="menuLevel">
            <el-radio-group v-model="addForm.menuLevel">
              <el-radio :label="1">一级</el-radio>
              <el-radio :label="2">二级</el-radio>
              <el-radio :label="3">三级</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="菜单图标" prop="iconCls">
            <el-popover
              placement="bottom-start"
              width="460"
              trigger="click"
              @show="$refs['iconSelect'].reset()"
            >
              <IconSelect ref="iconSelect" @selected="selected" />
              <el-input slot="reference" v-model="addForm.iconCls" placeholder="点击选择图标" readonly>
                <svg-icon
                  v-if="addForm.iconCls"
                  slot="prefix"
                  :icon-class="addForm.iconCls"
                  class="el-input__icon"
                  style="height: 32px;width: 16px;"
                />
                <i v-else slot="prefix" class="el-icon-search el-input__icon" />
              </el-input>
            </el-popover>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="菜单名称" prop="name">
                <el-input v-model="addForm.name" placeholder="请输入菜单名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="权限路径" prop="url">
                <el-input v-model="addForm.url" placeholder="请输入权限路径" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="路由地址" prop="path">
                <el-input v-model="addForm.path" placeholder="请输入路由地址" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="组件地址" prop="url">
                <el-input v-model="addForm.component" placeholder="请输入组件地址" />
              </el-form-item>
            </el-col>
          </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelEvent() ">取 消</el-button>
        <el-button type="primary" @click="dialogStatus==='create'?insertData():updateData()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- END 添加菜单权限对话框 END -->

  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
// Item.vue组件用于显示小图标
import Item from '@/layout/components/Sidebar/Item'
import IconSelect from '@/components/IconSelect'
import TreeSelect from '@/components/TreeSelect'
import { getAllMenuList,saveMenu,findByMenuId,updateMenu,delMenuById } from '@/api/menu'
import { resetRouter } from '@/router'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    Item,
    IconSelect,
    TreeSelect
  },
  data() {
    // 这里存放数据
    return {
      // 菜单列表
      menuList: [],
      // true则会显示正在加载的图标
      listLoading: true,
       // 展开/折叠通过下面属性来控制
      isExpandAll: false,

      refreshTable:true,

      textMap:{
        update: '编辑',
        create: '添加'
      },
      dialogStatus:"",
      addRightDialogVisible:false,
      // 用于绑定[添加菜单]对话框的表单数据
      addForm: {
        id: undefined,
        url: '',
        path: null,
        component: null,
        name: '',
        iconCls: '',
        enabled: 1,
        menuLevel: 1,
        parentId: 0
      },
      // 添加菜单表单验证规则对象
      addFormRules: {
        // 为权限名称的所在的表单项定义验证规则
        name: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' },
          { min: 3, max: 20, message: '菜单名称的长度在3~20个字符之间', trigger: 'blur' }
        ]
      },
      defaultProps: {
        children: 'children', // 树形控件的子节点
        label: 'name' // 以权限名作为树形控件的显示值
      },
      nodeKey: 'id', // 以权限编号作为当前树形控件中节点的key
      // 添加菜单对话框中，上级菜单下拉框的数据绑定到如下变量中
      treeMenuList: [],
      defaultCheckedKeys:""
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 在窗口加载事件中，直接调用getMenusList()查询出菜单列表信息
    this.getMenusList()
  },
  watch:{
    addForm:function(){
      this.$nextTick(()=>{
        this.$refs['treeRef'].$emit("updateCheckedKey");
      })
    }
  },
  // 方法集合
  methods: {
    // 开展和折叠按扭的点击事件
    toggleExpandAll() {
      //删除表格
      this.refreshTable=false;
      //改变折叠属性的值
      this.isExpandAll=!this.isExpandAll;
      //显示表格
      this.$nextTick(()=>{
        this.refreshTable=true;
      })
    },
    // 重置Menu对象
    resetMenu() {
      this.addForm = {
        id: undefined,
        url: '',
        path: null,
        component: null,
        name: '',
        iconCls: '',
        enabled: 1,
        menuLevel: 1,
        parentId: 0
      }
    },

    //取消
    cancelEvent(){
      //1.关闭弹框
      this.addRightDialogVisible=false;
    },
    // 下拉菜单节点选中事件，checkedIds为选中节点的nodeKey值，checkedData为选中节点对象
    // checkedData.id得到菜单编号、checkedData.name得到菜单名
    popoverHide (checkedIds, checkedData) {
        this.addForm.parentId = checkedData.id
    },

    // 新增按扭的点击事件
    openRightDialog() {
       //1.弹框
       this.addRightDialogVisible=true;
       //2.设置标题
       this.dialogStatus="create";
    },
    // 查询权限列表
    getMenusList() {
      // true时，表格中就会出现正在加载图标
      this.listLoading = true
      getAllMenuList().then((res) => {
        // false时，正在加载图标就会消失
        this.listLoading = false
        this.menuList = res.data

        this.treeMenuList.push({
          name:"主目录",
          id:0,
          children: res.data
        });


      }).catch((err) => {
        console.log(err)
      })
    },
    //新增
    insertData(){
      this.$refs['addFormRef'].validate((valid)=>{
        if(valid){//验证通过
          //发送异步请求
          saveMenu(this.addForm).then((res)=>{
              if(res.code==200){
                    //1.给出提示
                    this.$message({
                      title: '提示',
                      message: res.message,
                      type: 'success',
                      duration: 2000
                    });
                    //2.刷新列表数据
                    this.getMenusList();
                    //3.关闭新增弹框
                    this.addRightDialogVisible=false;
                    //4.清空数据
                    this.resetMenu();
                }else{
                    this.$message({
                      title: '提示',
                      message: res.message,
                      type: 'error',
                      duration: 2000
                    })
                }
          }).catch((err)=>{
            console.log(err)
          })
        }
      })
    },
    //修改
    updateData(){
      this.$refs['addFormRef'].validate((valid)=>{
        if(valid){//验证通过
          //发送异步请求
          updateMenu(this.addForm).then((res)=>{
              if(res.code==200){
                    //1.给出提示
                    this.$message({
                      title: '提示',
                      message: res.message,
                      type: 'success',
                      duration: 2000
                    });
                    //2.刷新列表数据
                    this.getMenusList();
                    //3.关闭新增弹框
                    this.addRightDialogVisible=false;
                    //4.清空数据
                    this.resetMenu();
                }else{
                    this.$message({
                      title: '提示',
                      message: res.message,
                      type: 'error',
                      duration: 2000
                    })
                }
          }).catch((err)=>{
            console.log(err)
          })
        }
      })
    },
    // 选择图标
    selected(name) {
      // 将选中的小图标赋值给addForm.iconCls
      this.addForm.iconCls = name
    },
    showEditDialog(id){
       //1.弹框
       this.addRightDialogVisible=true;
       //2.设置标题
       this.dialogStatus="update";
       //3.查询出要显示的数据
       findByMenuId(id).then((res)=>{
          this.addForm=res.data;
          // 设置父级权限所在的下拉框树形控件指定节点被选中
          this.defaultCheckedKeys = [res.data.parentId]

       }).catch((err)=>{
         console.log(err);
       })
    },
    //删除
    delRightById(id){
       //1.弹出确认框
       this.$confirm('确认要删除当前操作员信息吗?', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
       }).then(()=>{
          delMenuById(id).then((res)=>{
            if(res.code==200){
              //1.给出提示
               this.$message({
                  title: '提示',
                  message: res.message,
                  type: 'success',
                  duration: 2000
              });
              //2.刷新列表
              this.getMenusList();
              //3.重新赋值存储在vuex的菜单
              this.$store.dispatch('menu/initRouters');
            }else{
                this.$message({
                  title: '提示',
                  message: res.message,
                  type: 'error',
                  duration: 2000
                })
            }
          }).catch((err)=>{
            console.log(err);
          })
       }).catch((err)=>{
          console.log(err);
       })
    }

  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>

</style>

